<template>
  <el-dialog title="选择人员" :visible.sync="visible">
    <div class="header">
      <div
        :class="'headeritem' + index == 0 ? 'active': ''"
        data-index="0"
        :click="()=> {handleChange(0)}"
      >
        组织架构
      </div>
      <div
        :class="'headeritem' + index == 1 ? 'active' : ''"
        data-index="1"
        :click="()=>{handleChange(1)}"
      >
        职务
      </div>
      <div
        :class="'headeritem' + index == 2 ? 'active': ''"
        data-index="2"
        :click="()=>{handleChange(2)}"
      >
        群组
      </div>
    </div>
    <div>
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]"
        :props="defaultProps"
      />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        取 消
      </el-button>
      <el-button type="primary" @click="visible = false">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: { type: Boolean }
  },
  data() {
    return {
      index: 0,
      data: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1'
            },
            {
              id: 6,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1'
            },
            {
              id: 8,
              label: '二级 3-2'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleChange(index) {
      this.index = index
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-around;
}
.active {
  color: #4a98ff;
}
</style>
